@font-face {
    font-family: 'dmsans-variablefont_opsz,wght';
    src: url('../fonts/dmsans-variablefont_opsz,wght.ttf') format('truetype');
}

.header_menu {
    background: #B4A9DA;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 0px 30px 0px 30px;
}
    .header_menu .mud-paper {
        align-content: center;
        text-align: center;
        background-color: transparent;
        font-family: 'dmsans-variablefont_opsz,wght';
    }


        .header_menu .mud-paper a, .header_menu .mud-paper button {
            font-family: 'dmsans-variablefont_opsz,wght';
            color: #fff !important;
            font-weight: 600;
            font-size: .8rem
        }

        .header_menu .mud-paper .mud-menu-activator {
            color: #fff !important;
            font-weight: 600;
        }
    .header_menu ._logo {
        background-image: url(../images/MAE_logo_white_long.png) !important;
        background-size: contain; /* scales image to cover the div */
        background-position: center 0px; /* centers the image */
        background-repeat: no-repeat; /* prevents tiling */
        width: 200px; /* set width */
        height: 100px; /* set height */
    }


.Header_welcome {
    width: 100%;
    background: #B4A9DA;
    padding: 30vh 0 10vh 0;
    font-size: 36px;
    margin-top: -65px;
    height: 80vh;
    font-family: 'dmsans-variablefont_opsz,wght';
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
}
    .Header_welcome center {
        display: block;
        text-align: center;
        margin: auto;
        width: 60%;
        padding-bottom: 20vh;
    }
    .Header_welcome left {
        display: inline-block;
        text-align: left;
        margin-left: 50px;
        width: 50%;
    }
    .Header_welcome right {
        display: inline-block;
        text-align: right;
        margin-right: 50px;
        width: 40%;
    }
        .Header_welcome h1 {
            font-size: 52px;
            color: #fff;
            font-weight: 400;
        }
        .Header_welcome h2 {
            font-size: 36px;
            color: #fff;
            font-weight: 400;
            line-height: 36px;
        }
        .Header_welcome p {
            font-size: 20px;
            color: #fff;
        }
    .Header_welcome ._button {
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        border-radius: 25px;
        width: 180px;
        border: 1px solid #fff;
        margin-top: 10px;
        padding: 3px 0;
    }
.HP_SkinCare{
    margin: 80px 0 0 0;
}
.Header-title {
    font-family: 'dmsans-variablefont_opsz,wght';
    font-weight: 400;
    display: flex;
    align-items: flex-end;
    padding-bottom: 20px;
}
    .Header-title name {
        font-size: 52px;
        line-height: 52px;
        color: #000;
        width: 55%;
        padding-left: 50px;
    }
    .Header-title p {
        font-size: 36px;
        line-height: 36px;
        color: #b4a9da;
        white-space: pre-line;
    }
.HP_SkinCare ._banner {
    position: absolute;
}

.HP_SkinCare .full-width {
    width: 100%;
    height: auto;
}

.HP_SkinCare .relative {
    position: relative;
    text-align: center;
}

.HP_SkinCare .centered-text {
    font-family: 'dmsans-variablefont_opsz,wght';
    font-weight: 300;
    white-space: pre-line;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    line-height: 1.4rem;
    width: 100%;
}
    .HP_SkinCare .centered-text h1 {
        font-size: 1.5rem;
        font-weight: 500;
    }

.productbanner{
    display: flex;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
}
    .productbanner .product_img {
        text-align: center;
/*        background: #bab0cf;*/
        border-radius: 10px;
    }
    .productbanner .product_details {
        background: #e1e0dc;
        border-radius: 10px;

    }
/* .productbanner .product_img .full-width {
        width: 50%;
        height: auto;
    }*/
.carousel-products {
    padding: 40px 30px 60px 60px;
    font-family: 'dmsans-variablefont_opsz,wght';
}
._info {
    height: -webkit-fill-available;
}
._star num {
    margin-bottom: 10px;
    margin-left: 20px;
    font-weight: 400;
}

    ._star span {
        font-size: 1rem;
        margin-right: 2px;
    }
.carousel-products ._name {
    font-size: 2rem;
    font-weight: 800;
}
.carousel-products ._title {
    font-size: 1.1rem;
    line-height: .5;
    margin-bottom: 10px;
}
.carousel-products ._description {
    padding-top: 10px;
    font-size: .9rem;
    margin-bottom: 10px;
}
.carousel-products .imagess {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: -webkit-fill-available;
}
.carousel-product-box .mud-icon-button-label {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    border: 1px #424242 solid;
    padding: 5px;
}

._shopnow-button {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    border-radius: 25px;
    width: 180px;
    border: 1px solid #808080;
    margin-top: 0px;
    padding: 6px 0;
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 600px) {
}

@media (max-width: 480px) {
    .Header_welcome {
        padding: 5vh 0 1vh 0;
        margin-top: 0px;
        height: 25vh;
        border-radius: 8px;
    }

        .Header_welcome center {
            padding-bottom: 5vh;
        }
        .Header_welcome right {
           display:none
        }


        .Header_welcome h2 {
            font-size: 16px;
            line-height: 18px;
        }

        .Header_welcome p {
            font-size: 12px;
        }

        .Header_welcome ._button {
            font-size: 10px;
            width: 100px;
            margin-top: -20px;
            padding: 3px 0;
        }
    .HP_SkinCare {
        margin: 20px 0 0 0;
    }

    .Header-title {
        padding-bottom: 10px;
    
    }

        .Header-title name {
            font-size: 2rem;
            line-height: 1;
            padding: 0
        }

        .Header-title p {
            font-size: 14px;
            line-height: 14px;
        }
    .HP_SkinCare .centered-text {
     
        font-size: .5rem;
        line-height: .6rem;
        width: 100%;
    }
    .HP_SkinCare .centered-text h1 {
        font-size: 1rem;
    }
    .productbanner {
        gap: 8px;
        margin-top: 0px;
    }
    .productbanner .product_img {
        border-radius: 8px;
    }


    .carousel-products {
        border-radius: 5px;
        margin: 0px;
        padding: 0 0px;
        background:#e1e0dc
    }
        .carousel-products ._info {
          margin:0;padding:0 10px;
        }
        .carousel-products ._star svg {
            font-size: small;
            margin-right:-2px;
        }

    .carousel-products ._name {
        margin-top: 0px;
        font-size: 1rem;
        font-weight: 800;
    }
    .carousel-product-box .hidden-xs {
        display: none
    }

        .carousel-products ._title {
            font-size: .8rem;
        
        }

    .carousel-products ._description {
        padding-top: 0px;
        font-size: .5rem;
        margin-bottom: 5px;
    }

    .carousel-products .imagess {
        background-size: cover;
        background-position: center;
    }

    ._shopnow-button {
        font-size: .6rem;
        border-radius: 25px;
        width: 80px;
        margin-top: 0px;
        padding: 2px 0;
    }
}